import React from 'react';
import { connect } from 'react-redux'
import 'styles/component-lib/component-example.scss'
import { messages } from "share/common"
import NewAddPersonModal from 'containers/setting/new-workflow/setting/add-person-modal'
import NewNodeApproveAi from 'containers/setting/new-workflow/setting/node-content/node-approve-ai'
import NewNodeApproveMan from 'containers/setting/new-workflow/setting/node-content/node-approve-man'
import NewNodeApproveAudit from 'containers/setting/new-workflow/setting/node-content/node-audit'
import NewNodeKnow from 'containers/setting/new-workflow/setting/node-content/node-know'
import NewNodePrint from 'containers/setting/new-workflow/setting/node-content/node-print'
import { nodeTypes, approverNames } from "components/simple-flow/node-list";
import workflowUtil from 'containers/setting/new-workflow/utils'
import ListSelector from "components/list-selector";
import TagSelect from 'ant-design-pro/lib/TagSelect'
import {
  Form,
  Collapse,
  Select,
  Button,
  message,
  Popconfirm,
  Icon,
  Row,
  Col,
  Tag,
  Checkbox,
  Radio,
  Modal,
  Spin,
} from 'antd'
import Condition from 'components/condition'
const { If } = Condition;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const Panel = Collapse.Panel;
import { approvalAndDepLevel, nodeTypeName } from "./../utils"
import workflowService from 'containers/setting/workflow/workflow.service'
class WorkflowBaseSetting extends React.Component {
  constructor(props) {
    super(props);
    this.ruleBranchApprover = {
      '1100': [],
      '2200': [],
      '6001': [],
      '6002': [],
      '6004': [],
      '6100': [],
      '6003': [],
      '1004': [],
      '6600': [],
      '6500': [],
      '3300': [],
      '6005': [],
      '6006': [],
    };
    this.state = {
      basicInfo: {},
      loading: false,
      ruleApprovalNodeOID: '',
      selectApprovalRule: 5005,
      formInfo: {},
      showDepManager: false, //【包含申请人】是否选择部门经理
      formFieldList: null, //表单条件字段 字段类型(100默认, 101文本, 102整数, 103日期, 104浮点数, 105日期, 106值列表, 107GPS, 108布尔)
      formFieldCostCenterList: null, //审批条件为成本中心属性字段
      isRuleInEdit: false, //是否有审批条件处于编辑状态
      approvalOvertimeDay: '0-0',//审批超时时间 例0天0时
      approvePersonModal: false,
      ruleBranchApprover: this.ruleBranchApprover,
      nowNode: {},
      approvalMode: 1005,
      multi: ['fixedUserQuit', 'fixedUserLevelQuit', 'fixedUserPostQuit',],
      approverMulti: {
        'fixedUserQuit': {
          data: [],
          name: messages('setting.key2245')/*遇到指定人员终止：*/,
          listSelectorParams: {
            selectedData: [],
            visible: false,
            type: "user",
            valueKey: "userOID",
            labelKey: "fullName",
            extraParams: { roleType: 'TENANT' },
          }
        },
        'fixedUserPostQuit': {
          data: [],
          name: messages('setting.key2246')/*遇到指定人员职务终止：*/,
          listSelectorParams: {
            selectedData: [],
            type: "1002",
          }
        },
        'fixedUserLevelQuit': {
          data: [],
          name: messages('setting.key2247')/*遇到指定人员级别终止：*/,
          listSelectorParams: {
            selectedData: [],
            type: "1008",
          }
        },
      },
      tagList: [],
      selectedData: [],
      selectorLoading: false,
      tagListObj: {},
      nowType: null,
    };
  }

  copyData = (data) => {
    return JSON.parse(JSON.stringify(data));
  };

  componentDidMount() {
    let { nowNode, chainInfo } = this.props.params;
    this.setState({
      ruleApprovalNodeOID: nowNode.ruleApprovalNodeOID,
      selectApprovalRule: nowNode.selfApprovalRule,
      approvalOvertimeDay: nowNode.approvalOvertimeDay,
      showDepManager: !(nowNode.selfApprovalRule === 5001 || nowNode.selfApprovalRule === 5002),
      nowNode: this.props.params.nowNode,
      approvalMode: chainInfo.approvalMode,
      ruleBranchApprover: nowNode.ruleBranchApprover || this.state.ruleBranchApprover,
      copyNowNode: nowNode && this.copyData(this.props.params.nowNode),
      copyRuleBranchApprover: nowNode && nowNode.ruleBranchApprover && this.copyData(nowNode.ruleBranchApprover || this.ruleBranchApprover),
      copyShowDepManager: nowNode && nowNode.selfApprovalRule && this.copyData(!(nowNode.selfApprovalRule === 5001 || nowNode.selfApprovalRule === 5002)),
      copyApprovalOvertimeDay: nowNode && nowNode.approvalOvertimeDay && this.copyData(nowNode.approvalOvertimeDay),
      copySelectApprovalRule: nowNode && nowNode.selfApprovalRule && this.copyData(nowNode.selfApprovalRule)
    }, () => {
      this.setState({ ruleBranchApprover: nowNode.ruleBranchApprover || this.ruleBranchApprover, });
    })
  }


  componentWillReceiveProps(nextProps) {
    let { nowNode, chainInfo } = nextProps.params;
    if (this.state.ruleApprovalNodeOID !== nowNode.ruleApprovalNodeOID || (JSON.stringify(this.state.nowNode) !== JSON.stringify(nextProps.params.nowNode) )) {
      let selfApprovalRuleFlag = (nowNode.selfApprovalRule === 5001 || nowNode.selfApprovalRule === 5002);
      this.setState({
        ruleApprovalNodeOID: nowNode.ruleApprovalNodeOID,
        selectApprovalRule: selfApprovalRuleFlag ? 5005 : nowNode.selfApprovalRule,
        showDepManager: !selfApprovalRuleFlag,
        nowNode,
        approvalMode: chainInfo.approvalMode,
        copyNowNode: nowNode && this.copyData(nowNode),
        copyRuleBranchApprover: nowNode && nowNode.ruleBranchApprover && this.copyData(nowNode.ruleBranchApprover || this.ruleBranchApprover),
        copyShowDepManager: nowNode && nowNode.selfApprovalRule && this.copyData(!(nowNode.selfApprovalRule === 5001 || nowNode.selfApprovalRule === 5002)),
        copyApprovalOvertimeDay: nowNode && nowNode.approvalOvertimeDay && this.copyData(nowNode.approvalOvertimeDay),
        copySelectApprovalRule: nowNode && nowNode.selfApprovalRule && this.copyData(nowNode.selfApprovalRule)
      }, () => {

        this.setState({ ruleBranchApprover: nextProps.params.nowNode.ruleBranchApprover || this.ruleBranchApprover, });
        this.props.form.resetFields()
      });
      this.setState({
        approvalOvertimeDay: nextProps.params.nowNode.approvalOvertimeDay
      })
    }
  }

  componentWillUnmount() {
    //组件销毁的动作
  }

  handleChange = (nodes, routes) => {
    this.setState({ nodes, routes });
  };


  handleSelectApproval = () => {
    this.setState({
      approvePersonModal: true,
    })
  };

  onCancel = () => {
    let { copyNowNode, copyRuleBranchApprover, copyShowDepManager, copyApprovalOvertimeDay, copySelectApprovalRule } = this.state;
    this.setState({
      nowNode: copyNowNode,
      ruleBranchApprover: copyRuleBranchApprover || this.ruleBranchApprover,
      showDepManager: copyShowDepManager,
      approvalOvertimeDay: copyApprovalOvertimeDay,
      selectApprovalRule: copySelectApprovalRule
    }, () => {
      copyNowNode.ruleBranchApprover = copyRuleBranchApprover;
      this.props.onSave(copyNowNode);
    })
  };

  handleApproverChange = (newParams) => {
    if (newParams) {
      let { nowNode } = this.state;
      nowNode.ruleBranchApprover = newParams;
      this.setState({ nowNode })
    }
    this.setState({ approvePersonModal: false, })
  };

  handleDeleteApprover = () => {

  };

  deleteApprovers = (key) => {
    let { nowNode } = this.state;
    nowNode.ruleBranchApprover[key] = [];
    this.setState({ nowNode })
  }

  deletePerson = (key, index) => {
    let { nowNode } = this.state;
    nowNode.ruleBranchApprover [key].splice(index, 1);
    this.setState({ nowNode })
  };

  handleSave = () => {
    let { nowNode } = this.state;
    if (nowNode.type === nodeTypes.KNOWN || nowNode.type === nodeTypes.APPROVE) {
      if (!workflowUtil.isHaveApporver(nowNode.ruleBranchApprover)) {
        message.error(messages('setting.key1972')/*请选择审批人*/);
        return;
      }
    }
    if (nowNode.remark === '' || !nowNode.remark) {
      nowNode.remark = nodeTypeName[nowNode.type]
    }
    if (nowNode.type === nodeTypes.KNOWN) {
      nowNode.notifyWay = nowNode.notifyWay || [];
      nowNode.notifyInfo = nowNode.notifyInfo && {
          title: nowNode.title,
          content: nowNode.content,
          isApp: nowNode.notifyWay.indexOf('isApp') !== -1,
          isWeChat: nowNode.notifyWay.indexOf('isWeChat') !== -1,
          isWeb: nowNode.notifyWay.indexOf('isWeb') !== -1,
          isEmail: nowNode.notifyWay.indexOf('isEmail') !== -1,
          isMoney: true,
          isName: true,
          isReason: true
        };
    }
    this.props.onSave(nowNode);
  };

  //修改基础设置的回调
  onChangeAttr = (value, attr) => {
    let { nowNode } = this.state;
    nowNode[attr] = value;
    this.setState({
      nowNode
    });
  };

  handleApproverLevelChange = (item, level) => {
    let { nowNode } = this.state;
    item.level = level;
    this.setState({ nowNode })
  };

  handleMultiApproverLevelChange = (item, level) => {
    let { nowNode } = this.state;
    let value = { value: level, valueOIDs: level };
    item['ruleApproverQuitDTO']['fixedLevelQuit'] = JSON.stringify(value);
    this.setState({ nowNode })
  };

  onChangeApproverType = (value, attr) => {
    let { nowNode, ruleApprovalNodeOID } = this.state;
    nowNode[attr] = value;
    let ruleBranchApprover = {
      '1100': [],
      '2200': [],
      '6001': [],
      '6002': [],
      '6004': [],
      '6100': [],
      '6003': [],
      '1004': [],
      '6600': [],
      '3300': [],
      '6005': [],
      '6006': [],
    };
    //外部接口
    if (value === 2) {
      nowNode.ruleBranchApprover =  ruleBranchApprover;
      nowNode.ruleBranchApprover['7100'] = [];
      nowNode.ruleBranchApprover['1004'] = [{
        approverType: 1004,
        ruleApprovalNodeOID,
        name: messages('setting.key1651')/*外部接口*/
      }];
    }
    //普通审批
    if(value === 1){
      nowNode.ruleBranchApprover['1004'] = [];
      nowNode.ruleBranchApprover['7100'] = [];
    }
    //连续多级
    if (value === 3) {
      nowNode.ruleBranchApprover = ruleBranchApprover;
      nowNode.ruleBranchApprover['7100'] = [{
        approverType: 7100,
        name: messages('common.applicant')/*申请人*/,
        "ruleApproverQuitDTO": {
          "floorUserType": 6501,
          "approverUserType": 6100,
          "fixedLevelQuit": JSON.stringify({ value: 3, valueOIDs: 3 }),
          'fixedUserQuit': '',
          'fixedUserLevelQuit': '',
          'fixedUserPostQuit': ''
        }
      }];
    }
    this.setState({
      nowNode
    });
  };

  onClickModel = (type) => {
    let { approverMulti, tagList, tagListObj, nowNode } = this.state;
    let ruleApproverQuitDTO = nowNode.ruleBranchApprover['7100'][0]['ruleApproverQuitDTO'][type]
    if (type === 'fixedUserQuit') {
      approverMulti[type].listSelectorParams.visible = true;
      if (ruleApproverQuitDTO !== '') {
        let chooseUsers = [];
        JSON.parse(ruleApproverQuitDTO).valueOIDs.map((oid, index) => {
          chooseUsers.push({ userOID: oid, fullName: JSON.parse(ruleApproverQuitDTO).names[index] });
        });
        approverMulti[type].listSelectorParams.selectedData = chooseUsers;
      }
      this.setState({ approverMulti });
    } else {
      let selectedData = [];
      if (ruleApproverQuitDTO !== '') {
        selectedData = JSON.parse(ruleApproverQuitDTO).valueOIDs;
      }
      this.setState({ selectorLoading: true, selectorVisible: true, selectedData });
      workflowService.getBatchTypeList({ systemCustomEnumerationType: approverMulti[type].listSelectorParams.type })
        .then((res) => {
          tagList = res.data.values;
          tagList.map(tag => {
            tagListObj[tag.customEnumerationItemOID] = tag;
          });
          this.setState({ selectorLoading: false, tagList, tagListObj, nowType: type })
        })
        .catch(() => {
          this.setState({ selectorLoading: false })
        })
    }
  };

  handleCancel = (type) => {
    let { approverMulti } = this.state;
    approverMulti[type].listSelectorParams.visible = false;
    this.setState({ approverMulti });
  };

  handleOk = (res, type) => {
    let { approverMulti, nowNode } = this.state;
    let chooseItem = { value: [], valueOIDs: [], names: [] };
    !!res.result.length && res.result.map(item => {
      chooseItem.value.push(item.userOID);
      chooseItem.valueOIDs.push(item.userOID);
      chooseItem.names.push(item.fullName);
    });
    nowNode.ruleBranchApprover['7100'][0]['ruleApproverQuitDTO'][type] = JSON.stringify(chooseItem);
    approverMulti[type].listSelectorParams.selectedData = res.result;
    approverMulti[type].listSelectorParams.visible = false;
    this.setState({ approverMulti, nowNode });
  };

  handleAddSelectorData = () => {
    let { tagListObj, nowType, selectedData, nowNode } = this.state;
    let chooseItem = { value: [], valueOIDs: [], names: [] };
    !!selectedData.length &&
     selectedData.map(item => {
      chooseItem.value.push(tagListObj[item].value);
      chooseItem.valueOIDs.push(tagListObj[item].customEnumerationItemOID);
      chooseItem.names.push(tagListObj[item].messageKey);
    });
    nowNode.ruleBranchApprover['7100'][0]['ruleApproverQuitDTO'][nowType] = JSON.stringify(chooseItem);
    this.setState({ selectorVisible: false, nowNode })
  };

  handleCancelSelectorData = () => {
    this.setState({ selectorVisible: false})
  };

  deleteValues = (nowTypeData, type, index) => {
    let { nowNode } = this.state;
    nowTypeData.value.splice(index, 1);
    nowTypeData.valueOIDs.splice(index, 1);
    nowTypeData.names.splice(index, 1);
    nowNode.ruleBranchApprover['7100'][0]['ruleApproverQuitDTO'][type] = JSON.stringify(nowTypeData);
    this.setState({ nowNode })
  };

  render() {
    const { approvePersonModal, approvalMode, nowNode, multi, approverMulti, selectorVisible, selectorLoading,
      tagList, selectedData} = this.state;
    const { workflowApproverType } = this.props;
    const { formInfo } = this.props.params;
    let { ruleBranchApprover } = nowNode;
    let personType;
    let nodeTitle = '';
    if (this.props.params.nowNode) {
      switch(this.props.params.nowNode.type) {
        case 1001:
          personType = 1;
          nodeTitle = messages('setting.key1248')/*审批*/;
          break;
        case 1002:
          personType = 2;
          nodeTitle = messages('setting.key1272')/*知会*/;
          break;
        case 1012:
          personType = 3;
          nodeTitle = messages('setting.key2187')/*审核*/;
          break;
        default:
          personType = 2;
          nodeTitle = messages('setting.key1272')/*知会*/;
          break;
      }
    }
    //节点默认值在utils.js里配置
    return (
      <Form >
        <Collapse
          key="approve" bordered={false} defaultActiveKey={['base', 'approval']}
          className="workflow-base-setting"
        >
          <Panel header={messages('setting.key1070')/*基础设置*/} key="base">
            {approvalMode === 1002 && (
              <div className="node-not-custom-approve">
                <Row>
                  <Col span={5}>{messages('setting.key1382'/*节点为空时*/)}</Col>
                  <Col span={5}>{messages('setting.key1383'/*跳过*/)}</Col>
                </Row>
                <Row>
                  <Col span={5}>{messages('setting.key1422'/*全部通过后进入下一节点*/)}</Col>
                  <Col span={5}>{messages('setting.key1383'/*跳过*/)}</Col>
                </Row>
                <Row>
                  <Col span={5}>{messages('setting.key1423'/*出现重复审批操作*/)}</Col>
                  <Col span={5}>{messages('setting.key1383'/*跳过*/)}</Col>
                </Row>
                <Row>
                  <Col span={5}>{messages('setting.key1424'/*包含提交人*/)}</Col>
                  <Col span={5}>{messages('setting.key1383'/*跳过*/)}</Col>
                </Row>
              </div>
            )}
            {approvalMode === 1003 && (
              <div className="node-not-custom-approve">
                <Row>
                  <Col span={5}>{messages('setting.key1382'/*节点为空时*/)}</Col>
                  <Col span={5}>{messages('setting.key1383'/*跳过*/)}</Col>
                </Row>
                <Row>
                  <Col span={5}>{messages('setting.key1423'/*出现重复审批操作*/)}</Col>
                  <Col span={5}>{messages('setting.key1384'/*不跳过*/)}</Col>
                </Row>
                <Row>
                  <Col span={5}>{messages('setting.key1424'/*包含提交人*/)}</Col>
                  <Col span={5}>{messages('setting.key1384'/*不跳过*/)}</Col>
                </Row>
              </div>
            )}

            <If value={approvalMode === 1005}>
              <If value={nowNode.type === 1003}>
                <NewNodeApproveAi
                  basicInfo={nowNode}
                  onChangeAttr={this.onChangeAttr}
                  chosenNodeType={1003}
                />
              </If>
              <If value={nowNode.type === 1001}>
                <NewNodeApproveMan
                  basicInfo={nowNode}
                  formInfo={formInfo}
                  onChangeAttr={this.onChangeAttr}
                  basicInfoSaveHandle={this.handleBasicInfoSave}
                  modalVisibleHandle={this.handlePersonModalShow}
                />
              </If>
              <If value={nowNode.type === 1002}>
                <NewNodeKnow
                  basicInfo={nowNode}
                  formInfo={formInfo}
                  onChangeAttr={this.onChangeAttr}
                  basicInfoSaveHandle={this.handleBasicInfoSave}
                  modalVisibleHandle={this.handlePersonModalShow}
                />
              </If>
              <If value={nowNode.type === 1007}>
                <NewNodeApproveAi
                  basicInfo={nowNode}
                  chosenNodeType={1007}
                  onChangeAttr={this.onChangeAttr}
                  basicInfoSaveHandle={this.handleBasicInfoSave}
                />
              </If>
              <If value={nowNode.type === 1012}>
                <NewNodeApproveAudit
                  basicInfo={nowNode}
                  chosenNodeType={1012}
                  onChangeAttr={this.onChangeAttr}
                  basicInfoSaveHandle={this.handleBasicInfoSave}
                />
              </If>
              <If value={nowNode.type === 1005}>
                <div>
                  <Row>
                    <Col span={3}>{messages('setting.key1372'/*节点名称*/)}</Col>
                    <Col span={3}>{messages('setting.key1252'/*结束*/)}</Col>
                  </Row>
                  {/*报销单的formType以3开头，只有报销单和借款单才有打印配置*/}
                  <Row style={{ marginTop: 15 }}>
                    <Col span={3}>{messages('setting.key1425'/*是否打印*/)}</Col>
                    <Col span={3}>
                      <Checkbox defaultChecked={nowNode.isPrint} onChange={e => this.onChangeAttr(e.target.checked, 'isPrint')}/>
                    </Col>
                  </Row>
                </div>
              </If>
            </If>
            <If value={approvalMode === 1005 && (nowNode.type === 1004 || nowNode.type === 1013)}>
              <NewNodePrint
                basicInfo={nowNode}
                onChangeAttr={this.onChangeAttr}
                basicInfoSaveHandle={this.handleBasicInfoSave}
              />
            </If>
          </Panel>
          {approvalMode === 1005 && (nowNode.type === 1002 || nowNode.type === 1001 || nowNode.type === 1012) &&
          <Panel
            header={messages('setting.key2194', { arg1: nodeTitle })/*选择{arg1}人*/}
            key="approval">
            <If
              value={approvalMode === 1005 && (nowNode.type === 1002 || nowNode.type === 1001 || nowNode.type === 1012)}>
              <If value={nowNode.type === 1001 || nowNode.type === 1002 }>
                <RadioGroup
                  value={nowNode.nodeApproverType}
                  onChange={e => this.onChangeApproverType(e.target.value, 'nodeApproverType')}
                >
                  <Radio value={1}>
                    {messages('setting.key2248')/*普通审批人*/}
                  </Radio>
                  <Radio value={3}>
                    {messages('setting.key2249',{arg1: nodeTitle})/*连续多级{arg1}人*/}
                  </Radio>
                  <Radio value={2}>
                    {messages('setting.key2250',{arg1: nodeTitle})/*外部接口获取{arg1}人*/}
                  </Radio>
                </RadioGroup>
              </If>
              <If value={nowNode.type === 1012 || nowNode.nodeApproverType === 1}>
                <div className="add-btn" onClick={this.handleSelectApproval}>
                  <Icon
                    type="plus-circle"
                    className="icon-padding"
                  />
                  {messages('setting.key2195', { arg1: nodeTitle })/*添加{arg1}人*/}
                </div>
              </If>
              <If value={ruleBranchApprover && nowNode.nodeApproverType === 1}>
                <ul className="approver-list">
                  {/*按单据的组织架构 申请人参与人组织架构 按人员角色审批*/}
                  {['1100', '2200', '3300', '6005'].map(type => {
                    return (
                      <If value={!!(ruleBranchApprover[type] || []).length} key={type}>
                        <div className="approver-item">
                          <li>
                            {approverNames[type]}
                          </li>
                          {(ruleBranchApprover[type] || []).map((item, index) => {
                            return (<Row className="approver">
                              <Col
                                span={23}>{item.name}
                                {nowNode.type !== 1003 && nowNode.type !== 1007 && item.level && (
                                  <div onClick={e => {
                                    e.preventDefault();
                                    e.stopPropagation()
                                  }} style={{ display: 'inline-block' }}>
                                    <Select
                                      size="small"
                                      className={this.props.language.code === 'zh_cn' ? 'approve-level' : 'approve-level-en'}
                                      value={item.level}
                                      onChange={level => this.handleApproverLevelChange(item, level)}>
                                      {approvalAndDepLevel.map(level => <Option value={level.id}
                                                                                key={level.id}>{level.name}</Option>)}
                                    </Select>
                                  </div>
                                )}
                                {(item.containsApportionmentDepartmentManager || item.containsApportionmentCostCenterManager ||
                                item.containsApportionmentCostCenterPrimaryDepartmentManager) && `【${messages('setting.key1328'/*含分摊*/)}】`}
                              </Col>
                              <Col span={1}>
                                <Popconfirm onConfirm={(e) => {
                                  e.stopPropagation();
                                  this.deletePerson(type, index)
                                }}
                                            title={messages('common.confirm.delete')/*确定要删除吗？*/}>
                                  <Icon type="delete"/>
                                </Popconfirm>
                              </Col>
                            </Row>)
                          })}
                        </div>
                      </If>)
                  })}
                  {/*指定人员 指定人员组*/}
                  {['6001', '6003'].map(type => {
                    return (
                      <If value={!!(ruleBranchApprover[type] || []).length} key={type}>
                        <div className="approver-item">
                          <Row>
                            <Col span={24}>
                              <li>{nowNode.type === 1001 ? messages('setting.key1248')/*审批*/ : messages('setting.key1272')/*知会*/}{approverNames[type]}</li>
                            </Col>
                          </Row>
                          <Row style={{ paddingTop: 5 }}>
                            <Col span={23}>
                              {(ruleBranchApprover[type] || []).map((item, index) => {
                                return (
                                  <Tag key={item.id} closable
                                       onClose={() => this.deletePerson(type, index)}>{item.name}</Tag>
                                )
                              })
                              }
                            </Col>
                            <Col span={1}>
                              <Popconfirm onConfirm={(e) => {
                                e.stopPropagation();
                                this.deleteApprovers(type)
                              }}
                                          title={messages('common.confirm.delete')/*确定要删除吗？*/}>
                                <Icon type="delete"/>
                              </Popconfirm>
                            </Col>
                          </Row>
                        </div>
                      </If>)
                  })}
                  {/* 直属领导  成本中心经理 按单据上的成本中心的主要部门经理 成本中心上的动态人员*/}
                  {['6600', '6002', '6004', '6006', '6500'].map(type => {
                    return (
                      <If value={!!(ruleBranchApprover[type] || []).length} key={type}>
                        <div className="approver-item">
                          <li>
                            {approverNames[type]}
                          </li>
                          {(ruleBranchApprover[type] || []).map((item, index) => {
                            return (<Row className="approver">
                              <Col span={23}>
                                {item.name}
                                {nowNode.type !== 1003 && nowNode.type !== 1007 && item.level && (
                                  <div onClick={e => {
                                    e.preventDefault();
                                    e.stopPropagation()
                                  }} style={{ display: 'inline-block' }}>
                                    <Select
                                      size="small"
                                      className={this.props.language.code === 'zh_cn' ? 'approve-level' : 'approve-level-en'}
                                      value={item.level}
                                      onChange={level => this.handleApproverLevelChange(item, level)}
                                    >
                                      {approvalAndDepLevel.map(level =>
                                        <Option value={level.id} key={level.id}>{level.name}</Option>
                                      )}
                                    </Select>
                                  </div>
                                )}
                                {(item.containsApportionmentDepartmentManager || item.containsApportionmentCostCenterManager ||
                                item.containsApportionmentCostCenterExtendUser ||
                                item.containsApportionmentCostCenterPrimaryDepartmentManager) && `【${messages('setting.key1328'/*含分摊*/)}】`}
                              </Col>
                              <Col span={1}>
                                <Popconfirm
                                  onConfirm={(e) => {
                                    e.stopPropagation();
                                    this.deletePerson(type, index)
                                  }}
                                  title={messages('common.confirm.delete')/*确定要删除吗？*/}>
                                  <Icon type="delete"/>
                                </Popconfirm>
                              </Col>
                            </Row>)
                          })}
                        </div>
                      </If>)
                  })}
                </ul>
              </If>
              <If value={nowNode.nodeApproverType === 2}>
                <ul className="approver-list">
                  <div className="approver-item">
                    <li>
                      {approverNames['1004']}
                    </li>
                    {(ruleBranchApprover['1004'] || []).map((item, index) => {
                      return (<Row className="approver">{item.name}</Row>)
                    })}
                  </div>
                </ul>
              </If>
              <If value={nowNode.nodeApproverType === 3}>
                <ul className="approver-list">
                  <div className="approver-item">
                    <li>
                      {approverNames['7100']}
                    </li>
                    {(ruleBranchApprover['7100'] || []).map((item, index) => {
                      return (
                        <Row className="approver">
                          <div>{item.name}</div>
                          <div className="multi-approver">
                            {messages('setting.key2251')/*固定级次后终止：*/}
                            <div style={{ display: 'inline-block' }}>
                              <Select
                                size="small"
                                className={this.props.language.code === 'zh_cn' ? 'approve-level' : 'approve-level-en'}
                                value={JSON.parse(item.ruleApproverQuitDTO['fixedLevelQuit']).value}
                                onChange={level => this.handleMultiApproverLevelChange(item, level)}
                              >
                                {approvalAndDepLevel.map(level =>
                                  <Option
                                    value={level.id}
                                    key={level.id}>{level.depLevel}
                                  </Option>)
                                }
                              </Select>
                            </div>
                          </div>
                          {multi.map(type => {
                            let approverItem = approverMulti[type];
                            let nowTypeData = nowNode.ruleBranchApprover['7100'][0]['ruleApproverQuitDTO'][type]
                              && JSON.parse(nowNode.ruleBranchApprover['7100'][0]['ruleApproverQuitDTO'][type]);
                            let listSelectorParams = approverItem.listSelectorParams;
                            return (<div className="multi-approver">
                              {approverMulti[type].name}
                              <div style={{ display: 'inline-block' }}>
                                <div className="tag-select">{
                                  listSelectorParams &&
                                  (nowTypeData.value || []).map((value, valueIndex) => {
                                    let valueKey = listSelectorParams.valueKey;
                                    return (
                                      <Tag
                                        key={valueKey ? value[valueKey] : value}
                                        closable
                                        onClose={(e) => this.deleteValues(nowTypeData, type, valueIndex)}>
                                        {nowTypeData.names[valueIndex]}
                                      </Tag>
                                    )
                                  })}
                                  <span
                                    className="add-multi-user"
                                    onClick={() => this.onClickModel(type)}
                                  >
                                    { messages('common.add')/*添加*/}
                                  </span>
                                  <ListSelector
                                    {...listSelectorParams}
                                    onOk={(res) => this.handleOk(res, type)}
                                    onCancel={() => this.handleCancel(type)}
                                  />
                                </div>
                              </div>
                            </div>)
                          })}
                        </Row>)
                    })}
                  </div>
                </ul>
              </If>
            </If>
          </Panel>
          }
        </Collapse>
        <div className="slide-footer">
          <Button type="primary"
                  className="save-btn"
                  onClick={() => this.handleSave()}>{messages("common.save")}</Button>
          <Button className="cancel-btn"
                  onClick={this.onCancel}>{messages('setting.key1080')/*取消*/}</Button>
        </div>
        {workflowApproverType &&
        <NewAddPersonModal
          visible={approvePersonModal}
          personType={personType}
          ruleBranchApprover={ruleBranchApprover}
          ruleApprovalNodeOID={null}
          formInfo={this.props.params.formInfo}
          onSelect={this.handleApproverChange}
          onDelete={this.handleDeleteApprover}
        />}
        <Modal
          title={messages('common.please.select')}
          visible={selectorVisible}
          onOk={(nowType) => this.handleAddSelectorData(nowType)}
          onCancel={(nowType) => this.handleCancelSelectorData(nowType)}>
          <Spin spinning={selectorLoading}>
            {
              tagList.length === 0 ?
                <div style={{
                  minHeight: '80px',
                  textAlign: "center",
                  color: "gray"
                }}>{messages('setting.key1307'/*暂无数据*/)}</div> :
                <div style={{ minHeight: '80px', }} className="select-rule-modal-container">
                  <TagSelect
                    value={ selectedData }
                    onChange={ res => this.setState({ selectedData: res })}>
                    {(tagList || []).map(item => {
                      return <TagSelect.Option
                              value={item.customEnumerationItemOID || item.id}
                              key={item.customEnumerationItemOID || item.id}
                             >
                              {item.name || item.messageKey}
                             </TagSelect.Option>
                    })
                    }
                  </TagSelect>
                </div>}
          </Spin>
        </Modal>
      </Form>
    );
  }
}

WorkflowBaseSetting.PropTypes = {
  example: React.PropTypes.object.isRequired,
  componentKey: React.PropTypes.string.isRequired,
  close: React.PropTypes.string.func,
  onSave: React.PropTypes.string.func,
  setOfBooksId: React.PropTypes.string
};


function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
    language: state.main.language,
    workflowDepartmentPosition: state.cache.workflowDepartmentPosition,
    workflowApproverType: state.cache.workflowApproverType,//审批类型
  }
}

const WrappedWorkflowBaseSetting = Form.create()(WorkflowBaseSetting);

export default connect(mapStateToProps)(WrappedWorkflowBaseSetting);
